<template>
  <div id="BarChart">
    <echarts :option="barOption" />
  </div>
</template>

<script>
import Echarts from '../Echarts'

import { Option } from 'network/home'

export default {
  name: 'BarChart',
  components: {
    Echarts
  },

  data() {
    return {
      barOption: {}
    }
  },

  created() {
    if (
      this.storeStatistics !== undefined &&
      Object.keys(this.storeStatistics).length !== 0
    ) {
      this.barOption = new Option(this.storeStatistics)
      this.barOption.title.text = '统计人数条形图'
    }
  },
  computed: {
    storeStatistics() {
      return this.$store.state.statistics[0]
    }
  },

  watch: {
    storeStatistics(newVal, oldVal) {
      this.barOption = new Option(newVal)
      this.barOption.title.text = '统计人数条形图'
      // this.barOption.textStyle = {
      //   color: 'rgba(255, 255, 255, 0.3)',
      // }
    }
  }
}
</script>

<style scoped>
#BarChart {
  display: flex;
  width: 100%;
  height: 200px;
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
